<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>AI Assistant</title>
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <style>
        :root {
            --bg-color: #343541;
            --message-bg-user: #444654;
            --message-bg-bot: #40414F;
            --text-color: #ECECF1;
            --input-bg: #40414F;
        }

        body {
            background-color: var(--bg-color);
            color: var(--text-color);
            min-height: 100vh;
        }

        .chat-container {
            max-width: 800px;
            margin: 0 auto;
            height: 100vh;
            display: flex;
            flex-direction: column;
        }

        .message-container {
            flex: 1;
            overflow-y: auto;
            padding: 1rem;
        }

        .message {
            padding: 1.5rem;
            display: flex;
            gap: 1.5rem;
            background-color: var(--message-bg-bot);
        }

        .message.user {
            background-color: var(--message-bg-user);
        }

        .avatar {
            width: 30px;
            height: 30px;
            border-radius: 3px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .input-container {
            padding: 2rem 1rem;
            background: var(--bg-color);
            position: relative;
        }

        .chat-input {
            width: 100%;
            padding: 1rem 4rem 1rem 1.5rem;
            background: var(--input-bg);
            border: none;
            border-radius: 5px;
            color: var(--text-color);
            resize: none;
        }

        .send-button {
            position: absolute;
            right: 2rem;
            bottom: 3rem;
            background: none;
            border: none;
            color: var(--text-color);
        }

        .typing-indicator {
            display: none;
            padding: 1rem;
        }
        .typing-dot {
            display: inline-block;
            width: 8px;
            height: 8px;
            margin-right: 3px;
            background: var(--text-color);
            border-radius: 50%;
            animation: typing 1.4s infinite;
        }
        .typing-dot:nth-child(2) { animation-delay: 0.2s; }
        .typing-dot:nth-child(3) { animation-delay: 0.4s; }

        @keyframes typing {
            0%, 60%, 100% { transform: translateY(0); }
            30% { transform: translateY(-5px); }
        }

    </style>
</head>
<body>
<nav class="navbar navbar-dark bg-dark">
    <div class="container">
        <span class="navbar-brand">AI Assistant</span>
        <div class="d-flex">
            <button class="btn btn-outline-light me-2">升级</button>
            <button class="btn btn-primary">登录</button>
        </div>
    </div>
</nav>

<main class="chat-container">
    <div class="message-container">
        <!-- 示例消息 -->
        <div class="message user mb-2">
            <div class="avatar bg-primary">
                <svg fill="white" height="16" viewBox="0 0 24 24" width="16">
                    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
                    <circle cx="12" cy="7" r="4"/>
                </svg>
            </div>
            <div>帮我写一个Python快速排序的实现</div>
        </div>

        <div class="message mb-2">
            <div class="avatar bg-success">
                <svg fill="white" height="16" viewBox="0 0 24 24" width="16">
                    <path d="M4 14h16M4 14v4h16v-4M4 14l3-9h10l3 9"/>
                </svg>
            </div>
            <div>
                <p>以下是Python实现的快速排序算法：</p>
                <pre><code>def quick_sort(arr):
    if len(arr) <= 1:
        return arr
    pivot = arr[len(arr) // 2]
    left = [x for x in arr if x < pivot]
    middle = [x for x in arr if x == pivot]
    right = [x for x in arr if x > pivot]
    return quick_sort(left) + middle + quick_sort(right)</code></pre>
            </div>
        </div>

        <div class="typing-indicator">
            <div class="typing-dot"></div>
            <div class="typing-dot"></div>
            <div class="typing-dot"></div>
        </div>
    </div>

    <div class="input-container">
        <form id="chatForm">
                <textarea
                        autocomplete="off"
                        class="chat-input"
                        placeholder="输入您的问题..."
                        rows="1"
                ></textarea>
            <button class="send-button" type="submit">
                <svg fill="none" height="24" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" width="24">
                    <path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z"/>
                </svg>
            </button>
        </form>
    </div>
</main>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
        const form = document.getElementById('chatForm');
        const input = document.querySelector('.chat-input');
        const messageContainer = document.querySelector('.message-container');
        const typingIndicator = document.querySelector('.typing-indicator');

        // 自动调整输入框高度
        input.addEventListener('input', () => {
            input.style.height = 'auto';
            input.style.height = input.scrollHeight + 'px';
        });

        // 提交表单
        form.addEventListener('submit', async (e) => {
            e.preventDefault();
            const message = input.value.trim();

            if (!message) return;

            // 添加用户消息
            addMessage(message, 'user');
            input.value = '';

            // 显示正在输入指示器
            showTypingIndicator();

            // 模拟AI回复
            setTimeout(() => {
                hideTypingIndicator();
                addMessage('这是模拟回复内容...', 'bot');
            }, 1500);
        });

        function addMessage(content, type) {
            const messageDiv = document.createElement('div');
            messageDiv.className = `message ${type} mb-2`;

            messageDiv.innerHTML = `
                <div class="avatar ${type === 'user' ? 'bg-primary' : 'bg-success'}">
                    ${type === 'user' ?
                        '<svg width="16" height="16" viewBox="0 0 24 24" fill="white"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>' :
                        '<svg width="16" height="16" viewBox="0 0 24 24" fill="white"><path d="M4 14h16M4 14v4h16v-4M4 14l3-9h10l3 9"/></svg>'}
                </div>
                <div>${content}</div>
            `;

            messageContainer.insertBefore(messageDiv, typingIndicator);
            messageContainer.scrollTop = messageContainer.scrollHeight;
        }

        function showTypingIndicator() {
            typingIndicator.style.display = 'block';
            messageContainer.scrollTop = messageContainer.scrollHeight;
        }

        function hideTypingIndicator() {
            typingIndicator.style.display = 'none';
        }

</script>
</body>
</html>